<template>
	<div>
		<div class="Chapter">
			<div class="nav">
				<div class="nav_left">
					<div class="iconfont icon-fanhui" @click="gettply"></div>
					<span>返回</span>
				</div>
				<div class="nav_centen">
					<p class="centen">优质书源</p>
				</div>
				<div class="nav_rigth">
					<div class="iconfont icon-home"></div>
				</div>
			</div>
			<div class="Catalogue">
				<div class="Catalogue_nav">
					<div class="nav_left">
						<p>目录</p>
						<span>共{{this.lists.length}}条</span>
					</div>
					<div class="nav_rigth">
						<p>倒序</p>
					</div>
				</div>
				<div class="Catalogue_ul">
					<ul>
						<li v-for="(item,index) in this.lists" :key="index" @click="getBrowse(item.link)">{{item.title}}</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			lists:'',
		};
	},
	methods: {
		gettply() {
			this.$router.replace('/Bookdetails');
			this.$store.commit('showlists', (this.showlists = false));
		},
		getBrowse(link){
			console.log(link)
			// this.$router.replace('/Bookdetails/Browse');
			this.$router.push({
				path: '/Bookdetails/Browse',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
			localStorage.setItem('Books_Link',link)
		}
	},
	created() {
		this.$store.commit('showlists', (this.showlists = true));
		this.$toast.loading({
			duration: 0,
			forbidClick: true,
			mask: true,
			message: '加载中...',
		});
		let boosk_id = localStorage.getItem('boosk_id');
		this.$axios.get('http://novel.kele8.cn/book-sources?view=summary&book=' + boosk_id).then((res) => {
			this.$axios.get('http://novel.kele8.cn/book-chapters/' + res.data[0]._id).then((data) => {
				this.lists = data.data.chapters
				this.$toast.clear();
				// console.log(data)
			});
		});
	},
};
</script>

<style lang="less" scoped>
.Chapter {
	width: 640px;
	.nav {
		width: 640px;
		background-color: #b83320;
		display: flex;
		justify-content: space-between;
		.nav_left {
			flex: 0 0 100px;
			display: flex;
			.iconfont {
				font-size: 30px;
				line-height: 70px;
				color: #fff;
				margin-left: 10px;
			}
			span {
				line-height: 70px;
				color: #fff;
				font-size: 16px;
			}
		}
		.nav_centen {
			flex: 1;
			margin: 15px 0;
			// background: #999;
			display: flex;
			.centen {
				margin: 0 auto;
				color: #fff;
				margin-top: 8px;
				font-size: 18px;
			}
		}
		.nav_rigth {
			flex: 0 0 100px;
			display: flex;
			// background-color: #e9e9e9;
			.iconfont {
				font-size: 28px;
				line-height: 70px;
				margin: 0 auto;
				color: #fff;
			}
			div:nth-child(2) {
				font-size: 35px;
			}
		}
	}
	.Catalogue {
		padding: 14px 20px;
		.Catalogue_nav {
			display: flex;
			justify-content: space-between;
			p {
				font-size: 20px;
			}
			.nav_left {
				display: flex;

				span {
					margin-left: 10px;
					line-height: 30px;
					color: #a9aba9;
				}
			}
		}
		.Catalogue_ul{
			margin: 31px 0;
			ul{
				li{
					margin-top: 39px;
					color: #a9aba9;
				}
			}
		}
	}
}
</style>
